<template>
	<view>
		<view class="fixed">
			<view class="uni-status-bar" style="background: #fff;"></view>
			<view class="hb-headers" style="background-color: #fff;">
				<view class="hb-header">
					<view class="left">
						<view class="uni-page-head-btn"><i class="uni-btn-icon"
								style="color: rgb(0, 0, 0); font-size: 27px;" @click="back"></i></view>
					</view>
					<view class="title">{{$t('my.RevenueRecords')}}</view>
					<view class="right">
					</view>
				</view>
			</view>
			<view class="card">
				<view class="bg" :class="coin" v-if="wallet.data">
					<view class="tab flexSpace">
						<view class="item" v-for="item in tab" :class="tabIndex == item.val ? 'active':''" @click="ontab(item.val)">{{item.coin}}</view>
					</view>
					<view class="amount" v-if="coin !='USDT'">
						<view class="item">
							<view class="label">{{$t('yuebao.availableBalance')}}({{coin}})</view>
							<view class="num">{{Number(wallet.data[coin].balance_available)}}</view>
						</view>
						<view class="item" style="text-align:center;">
							<view class="label">{{$t('my.frozen')}}({{coin}})</view>
							<view class="num">{{Number(wallet.data[coin].balance_locked)}}</view>
						</view>
						<view class="item">
							<view class="label">{{$t('my.Equivalent')}}(USDT)</view>
							<view class="num" v-if="coin != 'USDT'">{{ Number(( Number(uCoinPrice) * (Number(wallet.data[coin].balance_available) + Number(wallet.data[coin].balance_locked)))).toFixed(2)}}</view>
						</view>
					</view>
					<view class="amount flexSpace" v-else>
						<view class="item" style="width: auto;">
							<view class="label">{{$t('yuebao.availableBalance')}}({{coin}})</view>
							<view class="num">{{Number(wallet.data[coin].balance_available).toFixed(2)}}</view>
						</view>
						<view class="item" style="right">
							<view class="label">{{$t('my.frozen')}}({{coin}})</view>
							<view class="num">{{Number(wallet.data[coin].balance_locked).toFixed(2)}}</view>
						</view>
					</view>
					<view class="flex-r">
						<view class="btn" @click="onNative('/pages/my/charge-money/index?coin='+coin)" v-if="coin=='USDT'">
							{{$t('my.charge')}}
						</view>
						<view class="btn" @click="onNative('/pages/my/mention-money/index?coin='+coin)">
							{{$t('my.withdraw')}}
						</view>
					</view>
				</view>
			</view>
			<view class="record">
				<view class="item" :class="tabIndex1 == 0 ?'active':''" @click="ontab1(0)">
					{{$t('my.RevenueRecords')}}
					<text></text>
				</view>
				<view class="item" :class="tabIndex1 == 1 ?'active':''" @click="ontab1(1)" v-if="tabIndex==0">
					{{$t('my.subsidiary.electricity')}}
					<text></text>
				</view>
			</view>
		</view>
		<view class="contain" v-if="tabIndex1 == 0">
			<view class="zyitem flexSpace" v-for="data in dataList">
				<view class="left">
			     	{{data.type_name}}
				</view>
				<view class="right flexSpace">
					<view class="order-left">
						<view class="label"> {{$t('info.order')}}:{{data.order_id}}</view>
						<view class="time">{{data.created_at}}</view>
					</view>
					<view class="order-right">
						<view class="label" :class="data.amount_type == 1 ? 'rise' : ''"> {{data.amount_type == 1 ? '+' : '-'}}{{data.coin == 'USDT' ?Number(data.amount).toFixed(2):Number(data.amount)}} {{data.coin}}</view>
						<view class="status">{{$t('info.success')}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="contain" v-if="tabIndex == 0 && tabIndex1 == 1">
			<view class="zyitem flexSpace" v-for="data in dataList">
				<view class="right flexSpace">
					<view class="order-left">
						<view class="label"> {{$t('info.order')}}:{{data.order_id}}</view>
						<view class="time">
							{{data.created_at}} 
							<text class="text">{{$t('my.Prepaid')}} {{data.days}} {{$t('day')}}{{$t('electFees')}}</text>
						</view>
					</view>
					<view class="order-right">
						<view class="label" :class="data.amount_type == 1 ? 'rise' : ''"> {{data.amount_type == 1 ? '+' : '-'}}{{data.coin == 'USDT' ?Number(data.amount).toFixed(2):Number(data.amount)}} {{data.coin}}</view>
						<view class="status">{{$t('info.success')}}</view>
					</view>
				</view>
			</view>
			<uniLoadMore :loadingType="loadingType" :contentText="contentText" style="padding-top:20rpx;"></uniLoadMore>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {incomeDetails,markPrice} from '@/api/wallet'
	import base64Code from '@/plugin/base64code';
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default{
		components:{
			uniLoadMore
		},
		data(){
			return{
				type:'',
				tabIndex:0,
				tabIndex1:0,
				coin:'USDT',
				page:1,
				total:0,
				dataList:[],
				loadingType: 0,
				uCoinPrice: 0, 
				tab: [
					{
						val: "0",
						coin: "USDT"
					},
					{
						val: "1",
						coin: "BTC"
					}
				]
			}
		},
		onLoad(option) {
			this.type = option.type
		},
		computed:{
			...mapState({
				wallet:state=>state.user.wallet
			}),
			contentText(){
				return{
					contentdown: this.$t('info.contentText.contentdown'),
					contentrefresh: this.$t('info.contentText.contentrefresh'),
					contentnomore: this.$t('info.contentText.contentnomore')
				}
			}
		},
		onShow() {
			this.getmarkPrice()
		},
		created() {
			this.getIcomeDetails()
			this.getmarkPrice()
		},
		methods:{
			back() {
				if (this.type == '0') {
					uni.switchTab({
						url: "/pages/home/index"
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			onReset() {
				// 数据重置
				this.page = 1;
				this.loadingType = 0;
				this.dataList = [];
				this.getIcomeDetails(true)
				this.getmarkPrice()
			},
			//切换币种
			ontab(index){
				if(this.tabIndex != index){
					this.tabIndex = index
					this.coin = this.tab[index].coin
					this.page = 1;
					this.loadingType = 0;
					if(this.tabIndex == 1){
						this.tabIndex1 = 0
					}
					this.onReset()
				}
			},
			ontab1(index){
				this.tabIndex1 = index
				this.page = 1;
				this.loadingType = 0;
				this.getIcomeDetails(true)
			},
			onNative(url){
				uni.navigateTo({
					url:url
				})
			},
			getIcomeDetails(bol){
				this.loadingType = 1;
				 var time = Math.round(new Date().getTime()/1000);
				 var data = {
					 coin:base64Code.adds(time,this.coin),
					 page:base64Code.adds(time,this.page),
					 is_power:base64Code.adds(time,this.tabIndex1),
					 time:time
				 }
				incomeDetails(data).then(res=>{
					if(res.code = '1000'){
						if (bol) {
							this.dataList = [];
						}
						this.total =res.data.total
						let arr = res.data.result
						this.dataList.push(...arr)
					
					}else{
						this.loadingType = 3
						this.dataList = [];
					}
				}).catch(() => {
					this.loadingType = 3
					this.dataList = [];
				})
			},
			onPullDownRefresh() {
				this.page = 1;
				this.loadingType = 0;
				this.getIcomeDetails(true);
			},
			onReachBottom() {
				if (this.loadingType !== 0) {
					return
				}
				this.getIcomeDetails();
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.fixed{
		width:100%;
		height:566rpx;
		position: fixed;
		left:0;
		top:0rpx;
		background: #fff;
		/*  #ifdef  APP-PLUS  */
		height:626rpx;
		/*  #endif  */
	}
	.card{
		padding:40rpx 40rpx 0;
		.bg{
			// padding: 0 36rpx;
			border-radius:16rpx 16rpx 0 0;
			height:344rpx;
			// background: url(@/static/my/curactive.png)no-repeat;
			// background-size:contain;
			&.FIL{
				background: url(@/static/my/FILactive.png)no-repeat;
				background-size:contain;
			}
			&.BTC{
				background: url(@/static/my/USDTactive.png)no-repeat;
				background-size:contain;
			}
			&.ETH{
				background: url(@/static/my/ETHactive.png)no-repeat;
				background-size:contain;
			}
			&.USDT{
				background: url(@/static/my/FILactive.png)no-repeat;
				background-size:contain;
			}
			.tab{
				padding-top:24rpx;
				.item{
					width:50%;
					text-align:center;
					font-size:32rpx;
					color: rgba(220, 172, 96, 1);
					&.active{
						color: #fff;
					}
				}
			}
			.amount{
				padding: 20rpx 32rpx 0;
				margin-top:40rpx;
				display:flex;
				.item{
					width:33%;
					.label{
						font-size:28rpx;
						color: rgba(255,255,255,.7);
						margin-bottom:20rpx;
					}
					.num{
						font-size:32rpx;
						color: #fff;
						font-family: HarmonyOS_Sans_SC_Bold;
					}
					&:last-child{
						text-align: right;
					}
				}
			}
		}
	}
	.way{
		padding:32rpx 64rpx;
		.item{
			width:260rpx;
			padding:20rpx 0;
			text-align:center;
			border-radius:8rpx;
			border:.5px solid $hb-primary-color;
			color: $hb-primary-color;
		}
	}
	.record{
		padding:30rpx 32rpx 22rpx;
		border-bottom:.5px solid rgba(233, 234, 236, 1);
		.item{
			font-size:28rpx;
			color: rgba(49, 49, 51, 1);
			display: inline-block;
			margin-right:60rpx;
			position:relative;
			color:rgba(38, 38, 40, 0.5);
			font-size:32rpx;
			text{
				position:absolute;
				bottom:-24rpx;
				left:0;
				width:80rpx;
				height:4rpx;
				background:$hb-text-black-color;
				opacity: 0;
			}
			&.active{
				color:$hb-text-black-color;
				text{
					opacity: 1;
				}
			}
		}
	}
	.contain{
		margin-top:566rpx;
		padding:32rpx;
		// background: $hb-bg;
		min-height:50vh;
		padding-top: 0;
		/*  #ifdef  APP-PLUS  */
		margin-top:626rpx;
		/*  #endif  */
		.zyitem{
			padding:16rpx 0;
			border-bottom:.5px solid $hb-border-color;
			align-items:center;
			.left{
				width:120rpx;
				font-size:28rpx;
				color: rgba(227, 137, 42, .5);
				// letter-spacing: 10rpx;
				text-align: left;
				margin-right:16rpx;
				line-height:40rpx;
			}
			.right{
				flex: 1;
				.label{
					font-size:28rpx;
					color: rgba(38, 38, 40, 1);
					margin-bottom:16rpx;
				}
				.time{
					font-size:24rpx;
					color: rgba(97, 99, 111, 1);
					.text{
						display: inline-block;
						margin-left: 20rpx;
						font-size: 24rpx;
						color: rgba(97, 99, 111, 0.6);
					}
				}
				.status{
					color: rgba(249, 85, 84, 1);
					text-align: right;
					font-size:24rpx;
				}
				.rise{
					color: rgba(18, 179, 76, 1);
				}
			}
			.title{
				padding:32rpx 0;
				font-size:36rpx;
				color: $hb-text-black-color;
				text{
					font-size:28rpx;
					color: $hb-primary-color;
				}
				border-bottom:.5px solid $hb-border-color;
			}
			.msg{
				padding:20rpx 0;
				font-size:28rpx;
				color: rgba(97, 99, 111, 1);
				line-height:60rpx;
			}
		}
	}
	.flex-r {
		display: flex;
		justify-content: start;
		align-items: center;
	    padding: 20rpx 32rpx 0;
		.btn {
			min-width: 128rpx;
			// padding:10rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			margin-right: 40rpx;
			background:#fff;
			color: rgba(220, 172, 96, 1);
			border-radius: 4rpx;
			margin-top: 24rpx;
			font-size: 28rpx;
			overflow: hidden;
			padding: 0 4rpx;
		}
	}
	
</style>
